<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部js文件 -->
    <script src="./js/ajax封装.js"></script>
</head>

<body>
    <table border="1" cellspacing="0">
        <tr>
            <td>序号</td>
            <td>类型</td>
            <td>埋设方式</td>
            <td>起始点号</td>
            <td>终止点号</td>
            <td>地面高程</td>
            <td>流向</td>
            <td>口径</td>
            <td>材质</td>
        </tr>
    </table>
    <script>
        ajaxFun("./json/data.json", function(data) {
            console.log(data);
            // 转为对象形式
            data = JSON.parse(data);
            var table = document.getElementsByTagName("table")[0];
            for (var i = 0; i < data.gwcx.length; i++) {
                table.innerHTML += `<tr>
                                        <td>${data.gwcx[i].id}</td>
                                        <td>${data.gwcx[i].type}</td>
                                        <td>${data.gwcx[i].buried}</td>
                                        <td>${data.gwcx[i].start}</td>
                                        <td>${data.gwcx[i].end}</td>
                                        <td>${data.gwcx[i].height}</td>
                                        <td>${data.gwcx[i].direction}</td>
                                        <td>${data.gwcx[i].caliber}</td>
                                        <td>${data.gwcx[i].material}</td>
                                     </tr>`
            }
        })
    </script>
</body>

</html>